<template>
  <a-modal :open="props.open" title="加入审核" :footer="null" width="1000px" destroy-on-close @cancel="confirm">
    <div class="add-audit-wrap my-scrollbar">
      <div>
        <a-table
          row-key="id"
          :indent-size="24"
          :columns="columns"
          :pagination="false"
          :data-source="dataList"
          :row-selection="rowSelection"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'number'">
              <span :style="[record.numberIs ? 'color:red' : '']">{{ record.number }}</span>
            </template>
            <template v-else-if="column.dataIndex === 'tel'">
              <span :style="[record.telIs ? 'color:red' : '']">{{ record.tel }}</span>
            </template>
            <template v-else-if="column.dataIndex === 'createTime'">
              {{ filterSecond(dateFormat(record.createTime)) }}
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <div class="tools-box">
                <div class="item" @click="allowFun('single', record.id)">同意</div>
                <div class="item" @click="ignoreFun('single', record.id)">忽略</div>
              </div>
            </template>
            <template v-else>
              {{ replaceEmptyStr(record[column.dataIndex]) }}
            </template>
          </template>
        </a-table>
      </div>
      <div v-show="batchShow" class="batch-bottom">
        <div class="btn-left">
          <div class="item action" @click="cancel">取消</div>
          <div class="devide-line"></div>
          <div class="item">已选{{ selectedList.length }}条</div>
          <a-button @click="allowFun()">同意</a-button>
          <a-button @click="ignoreFun()">忽略</a-button>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { dateFormat } from 'g6-fn'
  import { ref, watch } from 'vue'

  import useList from '@/hooks/use-list'
  import { studentsManageApi } from '@/services/api'

  import { AuditDataItem } from '../../school-organization-admin/types/index'
  const props = defineProps({
    open: {
      type: Boolean,
      default: false
    }
  })

  const emits = defineEmits<{ (e: 'confirm'): void }>()

  const columns = [
    {
      title: '学生姓名',
      dataIndex: 'username',
      ellipsis: true,
      key: 'username',
      width: 88
    },
    {
      title: '学号',
      dataIndex: 'number',
      ellipsis: true,
      key: 'number',
      width: 120
    },
    {
      title: '手机号码',
      dataIndex: 'tel',
      ellipsis: true,
      key: 'tel',
      width: 120
    },
    {
      title: '加入班级',
      dataIndex: 'fullOrgName',
      key: 'fullOrgName',
      ellipsis: true,
      width: 322
    },
    {
      title: '申请时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 150
    },
    {
      title: '',
      dataIndex: 'action',
      key: 'action',
      width: 120
    }
  ]

  const { pageForm, loading, dataList, getDataList } = useList<any, any>(studentsManageApi.joinList, {
    offset: 1,
    columns: '',
    limit: 10,
    total: 0
  })

  const replaceEmptyStr = (val: any) => {
    return [null, undefined, ''].includes(val) ? '/' : val
  }
  // 截取秒数
  const filterSecond = (time: string) => {
    const lastColonIndex = time.lastIndexOf(':')

    // 截取最后一个冒号之前的部分
    const valueBeforeLastColon = time.substring(0, lastColonIndex)
    return valueBeforeLastColon
  }
  const ids = ref<any>([])
  // 表格复选
  let selectedList = ref<(string | number)[]>([])
  const rowSelection = ref({
    checkStrictly: true,
    selectedRowKeys: selectedList,
    onChange: (selectedRowKeys: (string | number)[], selectedRows: AuditDataItem[]) => {
      console.log('selectedRows', selectedRows)
      ids.value = []
      ids.value = selectedRows.map((item: any) => {
        return item.id
      })
      console.log('paramsList:', ids.value)

      selectedList.value = selectedRowKeys
      if (selectedList.value.length > 0) {
        batchShow.value = true
      } else {
        batchShow.value = false
      }
    }
  })
  const batchShow = ref<boolean>(false)

  // 确定
  const confirm = () => {
    ids.value = []
    selectedList.value = []
    batchShow.value = false

    emits('confirm')
  }

  const cancel = () => {
    selectedList.value = []
    batchShow.value = false
  }

  // 过滤重复数据
  const filterRepetion = (res: any) => {
    if (res.code === 'SYSTEM-100000') {
      message.success(res.message)
      getDataList()
    }
    if (res.code === 'AUTH-100073') {
      message.error(res.message)
      const data = res.data
      // 学号重复
      if (data.repeatNumbers) {
        data.repeatNumbers.forEach((numbers: any) => {
          dataList.value.forEach((item: any, index: number) => {
            if (item.id === numbers) {
              dataList.value[index].numberIs = true
            }
          })
        })
      }
      // 手机号重复
      if (data.repeatTels) {
        data.repeatTels.forEach((numbers: any) => {
          dataList.value.forEach((item: any, index: number) => {
            if (item.id === numbers) {
              dataList.value[index].telIs = true
            }
          })
        })
      }
    }
  }
  // 同意
  const allowFun = async (code?: string, id?: string): Promise<void> => {
    if (code === 'single') {
      const res = await studentsManageApi.allowOrRejectSingle({ id: id, agreeFlag: true }, { noJudgeCode: true })
      filterRepetion(res)
    } else {
      const res = await studentsManageApi.allowOrReject({ ids: ids.value, agreeFlag: true }, { noJudgeCode: true })
      filterRepetion(res)
    }
  }
  // 忽略
  const ignoreFun = async (code?: string, id?: string): Promise<void> => {
    if (code === 'single') {
      const res = await studentsManageApi.allowOrRejectSingle({ id: id, agreeFlag: false }, { noJudgeCode: true })
      if (res.code === 'SYSTEM-100000') {
        message.success(res.message)
        getDataList()
      } else {
        const res = await studentsManageApi.allowOrReject({ ids: ids.value, agreeFlag: false })
        console.log('忽略:', res.data)
        if (res.code === 'SYSTEM-100000') {
          message.success(res.message)
          getDataList()
        }
      }
    }
  }

  watch(
    () => props.open,
    () => {
      if (props.open) {
        getDataList()
      }
    }
  )
  // getDataList()
</script>

<style lang="less" scoped>
  .add-audit-wrap {
    overflow-y: auto;
    padding-bottom: 48px;
    height: 476px;

    .batch-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 36px;
      width: 100%;
      height: 52px;
      background: #fff;
      box-shadow: 0 -1px 0 0 rgba(37, 37, 45, 0.12);

      .btn-left {
        display: flex;
        align-items: center;
        // margin-top: 44px;
        gap: 0 32px;

        .action {
          color: rgba(51, 176, 249, 1);
          cursor: pointer;
        }

        .devide-line {
          width: 1px;
          height: 36px;
          background-color: #e8e9eb;
        }
      }

      .tips-right {
        display: flex;
        gap: 0 4px;
        color: rgba(17, 22, 31, 0.52);
      }
    }

    .tools-box {
      display: flex;
      gap: 0 16px;
      color: rgba(0, 156, 248, 1);

      .item {
        cursor: pointer;
      }
    }
  }

  .footer-wrap {
    // display: flex;
    // justify-content: space-between;
    width: 100%;
  }

  :deep(.ant-modal .ant-modal-footer) {
    margin-top: 0 !important;
  }
</style>
